import { useData } from "./useData";
import { excludeFields } from "../constant/index";
import { nextTick } from "vue";

export const useColumn = () => {
  const { tableColumns, saveTableColumns, tableScrollRef, doms } = useData();
  const isLeftMove = (key: string) => {
    const columns = tableColumns.value.filter((item: any) => !excludeFields.includes(item.type));
    const targetIndex = columns.findIndex(item => item.key === key);
    const all = columns[targetIndex].isFixed ? columns.filter(item => item.isFixed) : columns.filter(item => !item.isFixed);
    const index = all.findIndex(item => item.key === key);
    return all.length === 1 || index === 0;
  };
  const isRightMove = (key: string) => {
    const columns = tableColumns.value.filter((item: any) => !excludeFields.includes(item.type));
    const targetIndex = columns.findIndex(item => item.key === key);
    const all = columns[targetIndex].isFixed ? columns.filter(item => item.isFixed) : columns.filter(item => !item.isFixed);
    const index = all.findIndex(item => item.key === key);
    return all.length === 1 || index >= all.length - 1;
  };

  const moveLeft = (key: string) => {
    const index = tableColumns.value.findIndex(item => item.key === key);
    if (index > 0) {
      const temp = tableColumns.value[index];
      tableColumns.value[index] = tableColumns.value[index - 1];
      tableColumns.value[index - 1] = temp;
      saveTableColumns();
      fixedStyle();
    }
  };

  const moveRight = (key: string) => {
    const index = tableColumns.value.findIndex(item => item.key === key);
    if (index < tableColumns.value.length - 1) {
      const temp = tableColumns.value[index];
      tableColumns.value[index] = tableColumns.value[index + 1];
      tableColumns.value[index + 1] = temp;
      saveTableColumns();
      fixedStyle();
    }
  };

  const isFreezeColumn = (key: String) => {
    const len = tableColumns.value.filter(item => item.isFixed).length;
    const index = tableColumns.value.findIndex(item => item.key === key);
    return len >= 3 && !tableColumns.value[index].isFixed;
  };

  const freezeColumn = (key: string) => {
    let index = tableColumns.value.findIndex(item => item.key === key);
    tableColumns.value[index].isFixed = !tableColumns.value[index].isFixed;

    if (tableColumns.value[index].isFixed) {
      //  冻结
      const obj = tableColumns.value.splice(index, 1);
      const lastFixedIndex = tableColumns.value.findLastIndex(item => item.isFixed);
      lastFixedIndex > -1 ? tableColumns.value.splice(lastFixedIndex + 1, 0, obj[0]) : tableColumns.value.splice(1, 0, obj[0]);
    } else {
      // 解冻
      const obj = tableColumns.value.splice(index, 1); // 删除当前列
      const lastFixedIndex = tableColumns.value.findLastIndex(item => item.isFixed);
      if (lastFixedIndex > -1) {
        tableColumns.value.splice(lastFixedIndex + 1, 0, obj[0]);
      } else {
        tableColumns.value.splice(1, 0, obj[0]);
      }
    }
    saveTableColumns();
    fixedStyle();
  };

  const removeColumn = (key: string) => {
    tableColumns.value = tableColumns.value.filter((item: any) => item.key != key);
    saveTableColumns();
    fixedStyle();
  };

  /**
   * 固定元素初始化元素左边距离
   */
  const fixedStyle = () => {
    nextTick(() => {
      const scrollLeft = tableScrollRef.value?.scrollLeft;
      // 旧dom
      doms["fixedDoms"].forEach((item: HTMLElement) => {
        // item.style.setProperty("position", "relative");
        // item.style.setProperty("left", "0");
        item.classList.add("wik-table-row-column-relative");
        // item.style.setProperty("transform", "translateX(0)");
      });
      // 重新赋值
      doms["fixedDoms"] = tableScrollRef.value.querySelectorAll(".wik-table-sticky");
      // DOM对象
      doms["fixedDoms"].forEach((item: HTMLElement) => {
        item.classList.add("wik-table-row-column-relative");
        // item.style.setProperty("transform", "translateX(0)");
      });
      // 固定元素样式变化
      doms["fixedDoms"].forEach((item: HTMLElement) => {
        item.style.setProperty("left", `${item.offsetLeft}px`);
        // item.style.setProperty("transform", `translateX(${item.offsetLeft}px)`);
      });

      doms["fixedDoms"].forEach((item: HTMLElement) => {
        item.classList.remove("wik-table-row-column-relative");
        if (scrollLeft > 0) {
          item.classList.add("wik-table-column-left-shadow");
        }
      });
    });
  };

  return {
    isLeftMove,
    isRightMove,
    moveLeft,
    moveRight,
    removeColumn,
    isFreezeColumn,
    freezeColumn,
    fixedStyle
  };
};
